import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { List, ListView, Tools, ActivityIndicator, PullToRefresh } from 'weaver-mobile';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';

const { Item } = List;
const { getLabel } = Tools;

@observer
export default class TableList extends Component {
  static defaultProps = {
    prefixCls: 'table-list',
  }

  constructor(props) {
    super(props);
    this.props.store.setState({ height: document.documentElement.clientHeight * 3 / 4 });
  }

  componentDidMount() {
    const { store } = this.props;
    store.getTableListDatas(null, true);
    const height = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
    store.setState({ height });
  }

  renderOps = (data, ops) => {
    const { renderOps, store: { checks } } = this.props;
    const check = toJS(checks.find(c => c.randomFieldId === data.randomFieldId));
    let opsCom = ops.map(o => {
      const randomFieldOp = JSON.parse(check.randomFieldOp);
      const index = Number(o.index);
      if (randomFieldOp[index]) {
        if (renderOps) {
          return renderOps(o, check, data);
        } else {
          return <span key={o.index}>{o.text}</span>;
        }
      }
      return null;
    });
    return opsCom;
  }

  onEndReached = () => {
    const { store } = this.props;
    const { loading, hasMore } = store;
    if (loading || !hasMore) { return ; }
    store.getTableListDatas();
  }

  render() {
    const { prefixCls, store, renderTitle } = this.props;
    const { loading, dataSource, ops, pageSize, hasMore, height } = store;

    const renderLoading = (
      <div className={`${prefixCls}-loading`}>
        <ActivityIndicator text="loading..." />
      </div>
    );
  
    const renderNoMore = (
      <div className={`${prefixCls}-nomore`}>
        <span className={`${prefixCls}-nomore-line-left`} />
        <span className={`${prefixCls}-nomore-line-name`}>{getLabel(390064, '没有更多啦')}</span>
        <span className={`${prefixCls}-nomore-line-right`} />
      </div>
    );

    const pullToRefresh = (
      <PullToRefresh
        distanceToRefresh={40}
        damping={40}
        // refreshing={true}
        indicator={{ release: renderLoading }}
        onRefresh={() => store.refreshTableList()}
      />
    );

    return (
      <div className={`${prefixCls}-warpper`}>
        <ListView
          style={{
            height,
            overflowY: 'auto',
            overflowX: 'hidden',
          }}
          ref={el => this.lv = el}
          initialListSize={pageSize}
          pageSize={pageSize}
          dataSource={toJS(dataSource)}
          pullToRefresh={pullToRefresh}
          onEndReached={this.onEndReached}
          onEndReachedThreshold={10}
          renderRow={data => (<Item key={data.randomFieldId} extra={this.renderOps(data, ops)}>{renderTitle ? renderTitle(data) : ''}</Item>)}
          renderFooter={() => (
            <div>{hasMore ? (loading ? renderLoading : '') : renderNoMore}</div>
          )}
        />
      </div>
    );
  }
}

